console.log('这是content script,ocr');

// 创建div元素
var ocrDiv = document.createElement('div');
ocrDiv.id = 'ocrResultDiv';
ocrDiv.style.position = 'fixed';
ocrDiv.style.right = '1px';
ocrDiv.style.bottom = '1px';
ocrDiv.style.width = '700px';
ocrDiv.style.height = '300px';
ocrDiv.style.backgroundColor = '#f9f9f9';
ocrDiv.style.border = '2px solid blue';
ocrDiv.style.zIndex = '99999999';
ocrDiv.style.overflow = 'hidden';
ocrDiv.style.borderRadius = '5px';
ocrDiv.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.05)';

// 创建关闭按钮
var closeButton = document.createElement('button');
closeButton.innerHTML = '×';
closeButton.style.position = 'absolute';
closeButton.style.top = '0px';
closeButton.style.right = '10px';
closeButton.style.border = 'none';
closeButton.style.background = 'none';
closeButton.style.fontSize = '24px';
closeButton.style.cursor = 'pointer';
closeButton.style.color = 'red';
closeButton.style.outline = 'none';

// 添加点击事件关闭div
closeButton.addEventListener('click', function () {
    document.body.removeChild(ocrDiv);
});

// 创建第一行文本
var ocrLabel = document.createElement('div');
ocrLabel.textContent = 'OCR识别结果';
ocrLabel.style.fontSize = '14px';
ocrLabel.style.fontWeight = 'bold';
ocrLabel.style.color = '#333';
ocrLabel.style.margin = '10px';

var aLabel = document.createElement('a');
aLabel.textContent = '本产品由京东50元一年服务器构建';
aLabel.style.fontSize = '14px';
aLabel.style.fontWeight = 'bold';
aLabel.style.color = 'blue';
aLabel.style.marginLeft = '300px';
aLabel.href="http://www.baidu.com";
aLabel.target="_blank";

ocrLabel.appendChild(aLabel);

// 创建输入框
var ocrInput = document.createElement('textarea');
ocrInput.style.width = 'calc(100% - 20px)';
ocrInput.style.height = '230px';
ocrInput.style.margin = '10px';
ocrInput.style.border = '1px solid red';
ocrInput.style.borderRadius = '3px';
ocrInput.style.padding = '5px';
ocrInput.style.resize = 'none';
ocrInput.style.boxSizing = 'border-box';


var isCapture = false;

var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '* { cursor: crosshair !important; }';

// content.js
chrome.runtime.onMessage.addListener(
    function (request, sender, sendResponse) {
        //console.log(sender.tab ? "from a content script:" + sender.tab.url : "from the extension");
        console.log(request.evt);
        if (request.evt == 'start') {

            // 把div添加到页面中
            if (document.getElementById('ocrResultDiv')) {
                document.body.removeChild(ocrDiv);
            }

            isCapture = true;
            // 设置鼠标指针为十字形状
            document.getElementsByTagName('head')[0].appendChild(style);
            sendResponse("start capture");
            startDrawing();
        }
        /*if (request.greeting == "hello") {
            sendResponse({farewell: "goodbye"});
        }*/
    });

//document 点击事件
/*document.addEventListener('click', function (e) {
    console.log("document click")
    document.body.removeChild(overlay);
});*/

var isDrawing = false;
var startPt = null;
var canvas = null;
var ctx = null;
var a;
var b;
var c;
var d;

canvas = document.createElement('canvas');
canvas.id = 'myId';
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
ctx = canvas.getContext('2d');
canvas.style.position = 'fixed';
canvas.style.width = '100%';
canvas.style.height = '100%';
canvas.style.top = "0px";
canvas.style.left = "0px";
canvas.style.zIndex = "10000";
canvas.style.backgroundColor = 'rgba(0, 0, 0, 0.2)';

function startDrawing() {
    console.log("startDrawing start");
    document.body.appendChild(canvas);
    /*document.getElementById("myId").addEventListener("click", function () {
        alert("Div was clicked!");
    });*/
    document.getElementById("myId").addEventListener('mousedown', onMouseDownCanvas);
    document.getElementById("myId").addEventListener('mousemove', onMouseMoveCanvas);
    document.getElementById("myId").addEventListener('mouseup', onMouseUpCanvas);
    console.log("startDrawing end");
}

function onMouseDownCanvas(e) {
    console.log("onMouseDown");
    isDrawing = true;
    startPt = {x: e.clientX, y: e.clientY};
}

function onMouseMoveCanvas(e) {
    console.log("onMouseMove");
    if (!isDrawing) return;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    const rect = {
        x: Math.min(startPt.x, e.clientX),
        y: Math.min(startPt.y, e.clientY),
        w: Math.abs(e.clientX - startPt.x),
        h: Math.abs(e.clientY - startPt.y),
    };
    ctx.strokeStyle = "red";
    ctx.strokeRect(rect.x, rect.y, rect.w, rect.h);
    a = rect.x;
    b = rect.y;
    c = rect.w;
    d = rect.h;
}

function onMouseUpCanvas() {
    console.log("onMouseUp");
    isDrawing = false;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    document.body.removeChild(canvas);
    document.getElementsByTagName('head')[0].removeChild(style);
    console.log(a + ":" + b + ":" + c + ":" + d);

    // 其他代码添加内容到输入框...
    // 把子元素加入到div中
    // 把div添加到页面中
    ocrInput.value = "识别中...";
    ocrDiv.appendChild(closeButton);
    ocrDiv.appendChild(ocrLabel);
    ocrDiv.appendChild(ocrInput);
    document.body.appendChild(ocrDiv);

    chrome.runtime.sendMessage({evt: "capture", "x": a, "y": b, "w": c, "h": d}, function (response) {
        console.log('收到来自后台的回复：' + response);

        // 把div添加到页面中
        ocrInput.value = response;


    });
}
